<template>
    <div>
        <el-table ref="multipleTableRef" :data="props.tableData" style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="55" />
            <el-table-column label="Date" width="120">
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" label="Name" width="120" />
            <el-table-column property="address" label="Address" show-overflow-tooltip />
            <el-table-column label="操作" width="160">

                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { ref , watchEffect } from 'vue'
import { ElTable } from 'element-plus'

interface User {
    id: number,
    date: string
    name: string
    address: string
}

const props = defineProps(['tableData'])
const emit = defineEmits(['handleEditDialogOpen', 'deleteCurb', 'deleteCurbList'])

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])

// 全选
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
    emit('deleteCurbList', val)
}
// 修改
const handleEdit = (index: number, row: User) => {
    emit('handleEditDialogOpen', true, row)
    // console.log(index, row)
}
// 删除
const handleDelete = (index: number, row: User) => {
    // console.log(index, row)
    emit('deleteCurb', row)
}
</script>